<template>
      <div class="form-group" style="padding-right:30px;">
            <div class="row">
                  <div class="col-xs-12">
                      <span>商品条件(MDL)</span>  
                  </div>
            </div>
            <div class="row">
                  <div class="col-xs-12">
                      <label style="font-weight:normal"><input type="radio" v-model="returnGoodsType" value="kaisou" name="goodsA">商品階層</label>
                      <label style="font-weight:normal;margin-left:10px;"><input type="radio" v-model="returnGoodsType" value="group" name="goodsA">商品グループ</label>
                      <label style="font-weight:normal;margin-left:10px;"><input type="radio" v-model="returnGoodsType" value="jan" name="goodsA">単品</label> 
                  </div>
                  <!-- 商品阶层组件 -->
                  <prodComponent v-show="prodShow" />
                  <!-- 商品グループ组件 -->
                  <prodGrpComponent v-show="prodGrpShow" />
                  <!-- jan単品组件 -->
                  <janComponent v-show="janShow" />
                  
            </div>
            <div style="border-bottom:1px solid #dddddd;margin-top:10px;"></div>
      </div>
</template>

<script>
import janComponent from '@/components/jan.vue';
import prodComponent from '@/components/mdl_prodkaisou.vue';
import prodGrpComponent from '@/components/mdl_prodGrp.vue';
export default {
      name:'menuprodComponent',
      components:{
            janComponent,
            prodGrpComponent,
            prodComponent
      },
      data:function(){
            return {
                  prodShow: true,
                  prodGrpShow: false,
                  janShow: false
            };
      },
      props:{
      },
      watch:{
      },
      computed:{
            returnGoodsType:{
                  get(){
                        return 'kaisou';
                  },
                  set(val){
                        if(val === 'kaisou') {
                              this.prodShow = true
                              this.prodGrpShow = false
                              this.janShow = false
                        }else if(val === 'group') {
                              this.prodShow = false
                              this.prodGrpShow = true
                              this.janShow = false
                        }else {
                              this.prodShow = false
                              this.prodGrpShow = false
                              this.janShow = true
                        }
                  }
            }
      }
};
</script>